<template>
    <div class="menu">
        <span @click="back">&lt;</span>
        <router-link active-class="active" to="/counter">counter</router-link>
        <router-link active-class="active" to="/contact">通讯录</router-link>
    </div>
    
</template>
<script>
    export default {
        methods:{
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>
<style scoped>
    .menu{height:2em; line-height:2em;border-bottom:1px #e0e0e0 solid; text-align:center;position:fixed;top:0;width:100%; max-width:480px;}
    .menu a{display:inline-block; padding:0 1em; }
    .menu a:hover{background-color:#ccc;}
    .menu a.active{background-color:#a0a0a0; color:#000; font-weight:bold;}
    .menu a.active:hover{background-color:#a0a0a0; color:#000;}
    .menu span{display:inline-block; font-size:1.5em; padding:0 .6em; float:left;cursor:pointer}
</style>